<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>学生管理列表</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>

    <div th:include="common/common.html :: commonheader"></div>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common/common.html :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="common/common.html :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                学生管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">学籍管理系统</a>
                </li>
                <li>
                    <a href="#">学生管理</a>
                </li>
                <li class="active">学生管理表</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <header class="panel-heading">
                        学生信息表
                    </header>
                    <div class="panel-body">
                        <div class="adv-table">
                            <!-- 添加按钮 -->
                            <button id="stu_add_btn" type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#stu_add_modal">
                                添加记录
                            </button>
                            <button class="btn btn-danger" id="stu_delete_all">批量删除</button>
                            <!-- 搜索框  -->
                            <form class="navbar-form navbar-left">
                                <div class="form-group">
                                    <input id="search_val" type="text" class="form-control" placeholder="根据学号或姓名查找">
                                </div>
                                <input id="search_btn" type="button" class="btn btn-default" value="查找"/>
                            </form>
                            <!-- 添加模态框 -->
                            <div class="modal fade" id="stu_add_modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">学生添加</h4>
                                        </div>

                                        <div class="modal-body">
                                            <form id="stu_add_form" class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="sName_from_add"
                                                           class="col-sm-2 control-label">*姓名</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" name="sName"
                                                               id="sName_from_add" placeholder="姓名" required="required">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">*性别</label>
                                                    <div class="col-sm-10">
                                                        <label class="radio-inline">
                                                            <input type="radio" name="sSex" id="gender1_add_input"
                                                                   value="0" checked="checked">
                                                            男
                                                        </label>
                                                        <label class="radio-inline">
                                                            <input type="radio" name="sSex" id="gender2_add_input"
                                                                   value="1"> 女
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="sIdNumber_from_add"
                                                           class="col-sm-2 control-label">*身份证号码</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" name="sIdNumber"
                                                               id="sIdNumber_from_add"
                                                               placeholder="身份证号码" required="required">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="sAddress_from_add"
                                                           class="col-sm-2 control-label">家庭住址</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="sAddress_from_add"
                                                               name="sAddress"
                                                               placeholder="家庭住址" required="required">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="sPhone_from_add"
                                                           class="col-sm-2 control-label">*手机号码</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="sPhone_from_add"
                                                               name="sPhone"
                                                               placeholder="手机号码" required="required">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="dept_options" class="col-sm-2 control-label">*院系</label>
                                                    <div class="dropdown col-sm-6">
                                                        <select id="dept_options" class="form-control"
                                                                name="sDepartment">
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="major_options"
                                                           class="col-sm-2 control-label">*专业</label>
                                                    <div class="dropdown col-sm-6">
                                                        <select id="major_options" class="form-control" name="sMajor">
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="class_options"
                                                           class="col-sm-2 control-label">*班级</label>
                                                    <div class="dropdown col-sm-6">
                                                        <select id="class_options" class="form-control" name="sClass">
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="sStatus_from_add"
                                                           class="col-sm-2 control-label">*状态</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="sStatus_from_add"
                                                               name="sStatus"
                                                               placeholder="当前状态" required="required">
                                                    </div>
                                                </div>

                                            </form>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" id="stu_add_cancel" class="btn btn-default"
                                                    data-dismiss="modal">取消
                                            </button>
                                            <button type="button" id="stu_add_enter" class="btn btn-primary">确认
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <table class="display table table-bordered ">
                                <thead>
                                <tr>
                                    <th style="text-align: center" width="20px">
                                        <input type="checkbox" id="check_all"/>
                                    </th>
                                    <th style="text-align: center">学号</th>
                                    <th style="text-align: center">姓名</th>
                                    <th style="text-align: center">性别</th>
                                    <th style="text-align: center">联系方式</th>
                                    <th style="text-align: center">所属院系</th>
                                    <th style="text-align: center">专业</th>
                                    <th style="text-align: center">班级</th>
                                    <th style="text-align: center">状态</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="stu_tbody">
                                </tbody>
                            </table>
                            <!-- 导航条 -->
                            <div class="row-fluid" id="page_info"></div>
                            <div class="row-fluid" id="page_nav"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <div th:replace="common/common.html :: footer"></div>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- 修改模态框 -->
<div class="modal fade" id="stu_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">学生信息修改</h4>
            </div>

            <div class="modal-body">
                <form id="stu_update_form" class="form-horizontal">
                    <input type="hidden" id="sId_from_update" name="sId">
                    <div class="form-group">
                        <label for="sName_from_add"
                               class="col-sm-2 control-label">*姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sName"
                                   id="sName_from_update" placeholder="姓名" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">*性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="sSex" id="gender1_update_input"
                                       value="0" checked="checked">
                                男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sSex" id="gender2_update_input"
                                       value="1"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sIdNumber_from_add"
                               class="col-sm-2 control-label">*身份证号码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sIdNumber"
                                   id="sIdNumber_from_update"
                                   placeholder="身份证号码" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sAddress_from_add"
                               class="col-sm-2 control-label">家庭住址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="sAddress_from_update"
                                   name="sAddress"
                                   placeholder="家庭住址" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sPhone_from_add"
                               class="col-sm-2 control-label">*手机号码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="sPhone_from_update"
                                   name="sPhone"
                                   placeholder="手机号码" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="dept_options" class="col-sm-2 control-label">*院系</label>
                        <div class="dropdown col-sm-6">
                            <select id="dept_options_update" class="form-control"
                                    name="sDepartment">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="major_options"
                               class="col-sm-2 control-label">*专业</label>
                        <div class="dropdown col-sm-6">
                            <select id="major_options_update" class="form-control" name="sMajor">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="class_options"
                               class="col-sm-2 control-label">*班级</label>
                        <div class="dropdown col-sm-6">
                            <select id="class_options_update" class="form-control" name="sClass">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sStatus_from_add"
                               class="col-sm-2 control-label">*状态</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="sStatus_from_update"
                                   name="sStatus"
                                   placeholder="当前状态" required="required">
                        </div>
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="stu_update_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="stu_update_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 详细信息模态框 -->
<div class="modal fade" id="stu_info_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2">学生添加</h4>
            </div>

            <div class="modal-body">
                <form id="stu_info_form" class="form-horizontal">
                    <div class="form-group">
                        <label for="sId_from_info" class="col-sm-2 control-label">*学号</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control"
                                   id="sId_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sName_from_info"
                               class="col-sm-2 control-label">*姓名</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control"
                                   id="sName_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">*性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input disabled type="radio" name="sSex" id="gender1_info_input"
                                       value="0" checked="checked">
                                男
                            </label>
                            <label class="radio-inline">
                                <input disabled type="radio" name="sSex" id="gender2_info_input"
                                       value="1"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sIdNumber_from_info"
                               class="col-sm-2 control-label">*身份证号码</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="sIdNumber_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sAddress_from_info"
                               class="col-sm-2 control-label">家庭住址</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="sAddress_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sPhone_from_info"
                               class="col-sm-2 control-label">*手机号码</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="sPhone_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="department_from_info" class="col-sm-2 control-label">*院系</label>
                        <div class="dropdown col-sm-6">
                            <input disabled type="text" class="form-control" id="department_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="major_from_info" class="col-sm-2 control-label">*专业</label>
                        <div class="dropdown col-sm-6">
                            <input disabled type="text" class="form-control" id="major_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="class_from_info" class="col-sm-2 control-label">*班级</label>
                        <div class="dropdown col-sm-6">
                            <input disabled type="text" class="form-control" id="class_from_info">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sStatus_from_info"
                               class="col-sm-2 control-label">*状态</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="sStatus_from_info">
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="stu_info_enter" class="btn btn-primary">关闭
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>
<script type="text/javascript">
    $(function () {
        to_page(1);
        var totalPage;
        var currentPage;
        var Pages;

        // 获取解析院系数据
        function build_table(data) {
            // 清空原来的数据
            $("#stu_tbody").empty();
            let students = data.extend.students;
            $.each(students, function (index, item) {
                let checkBox = $("<td><input type='checkbox' class='check_item'/></td>");
                let sId = $("<td style=\"text-align: center\"></td>").append(item.sid);
                let sName = $("<td style=\"text-align: center\"></td>").append(item.sname);
                let sSex = $("<td style=\"text-align: center\"></td>").append(item.ssex === 0 ? '男' : '女');
                let sPhone = $("<td style=\"text-align: center\"></td>").append(item.sphone);
                let dName = $("<td style=\"text-align: center\"></td>").append(item.dname).attr("sDepartment", item.sdepartment);
                let mName = $("<td style=\"text-align: center\"></td>").append(item.mname).attr("sMajor", item.smajor);
                let cName = $("<td style=\"text-align: center\"></td>").append(item.cname).attr("sClass", item.sclass);
                let sStatus = $("<td style=\"text-align: center\"></td>").append(item.sstatus);
                let updateBtn = $("<button></button>").addClass("btn btn-info update_btn").append("修改").attr("update_btn", item.sid)
                    .attr("data-target", "#stu_update_modal").attr("data-toggle", "modal");
                let infoBtn = $("<button></button>").addClass("btn btn-default info_btn").append("详细信息").attr("info_btn", item.sid)
                    .attr("data-target", "#stu_info_modal").attr("data-toggle", "modal");
                let delBtn = $("<button></button>").addClass("btn btn-danger del_btn").append("删除").attr("del_btn", item.sid);
                let btnTd = $("<td style=\"text-align: center\"></td>").append(updateBtn).append(" ").append(infoBtn).append("").append(delBtn);
                $("<tr></tr>").append(checkBox)
                    .append(sId).append(sName)
                    .append(sSex).append(sPhone).append(dName).append(mName).append(cName).append(sStatus)
                    .append(btnTd)
                    .appendTo($("#stu_tbody"));
            });
        }

        // 解析显示分页数据
        function build_page_info(result) {
            let page_info = $("#page_info");
            //清空跳行条内容
            page_info.empty();
            // 获取总记录条数
            let total = result.extend.page.total;
            // 获取当前页
            let current = result.extend.page.current;
            currentPage = current;
            // 获取最大页数
            let pages = parseInt(result.extend.page.total / result.extend.page.size);
            if (result.extend.page.total % result.extend.page.size !== 0) {
                pages++;
            }
            totalPage = pages;
            Pages = pages;
            if(result.extend.page.total == pages * result.extend.page.size) {
                Pages++;
            }
            page_info.append("当前第" + current + "页,共" + pages + "页,共条" + total + "记录");
        }

        // 解析显示分页数据
        function build_page_nav(result) {
            //获取page信息
            let page = result.extend.page
            let page_nav = $("#page_nav");
            page_nav.empty();
            let ul = $("<ul></ul>").addClass("pagination")
            // 去首页
            let firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            // 上一页
            let prevPageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));
            // 判断上一页能否使用
            if (page.current === 1) {
                firstPageLi.addClass("disabled");
                prevPageLi.addClass("disabled");
            } else {
                firstPageLi.click(function () {
                    to_page(1);
                });
                prevPageLi.click(function () {
                    to_page(page.current - 1);
                });
            }
            ul.append(firstPageLi).append(prevPageLi);


            // 下一页
            let nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href", "#"));
            // 末页
            let lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            // 判断下一页和末页是否生效
            if (page.current === page.pages) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
                nextPageLi.click(function () {
                    to_page(page.current + 1);
                });
                lastPageLi.click(function () {
                    to_page(page.pages);
                });
            }

            // // 中间页码
            if (page.pages <= 5) {
                for (let pageNum = 1; pageNum <= page.pages; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            } else if (page.pages > 5 && page.current < 3) {
                for (let pageNum = 1; pageNum <= 5; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            } else if (page.pages > 5 && page.current <= page.pages - 2) {
                for (let pageNum = page.current - 2; pageNum <= page.current + 2; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            } else if (page.pages > 5 && page.current > page.pages - 2) {
                for (let pageNum = page.current - 4; pageNum <= page.pages; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            }

            ul.append(nextPageLi).append(lastPageLi);
            let nav = $("<nav></nav>").attr("aria-label", "Page navigation").attr("style", "float: right");
            nav.append(ul);
            nav.appendTo(page_nav);
        }

        function to_page(pn) {
            $.ajax({
                url: "/student",
                data: "pn=" + pn,
                type: "GET",
                success: function (result) {
                    // 1.解析并显示员工数据局
                    build_table(result);
                    // 分页数据
                    build_page_info(result);
                    // 导航条
                    build_page_nav(result);
                    $("#check_all").prop("checked", "");
                }
            })
        }

        // 点击添加 按钮  获取到 所有院系 作为下拉列表
        function options(option) {
            // 发送Ajax请求 获取到 院系信息
            $.ajax({
                url: "/department_all",
                type: "GET",
                success: function (result) {
                    let depts = result.extend.departments;
                    option.empty();
                    $("<option></option>").append("选择院系").attr("value", "-1").appendTo(option);
                    $.each(depts, function (index, item) {
                        $("<option></option>").append(item.dname).attr("value", item.did).appendTo(option);
                    });
                }
            });
        }

        // 监听 院系下拉菜单
        $("#dept_options").change(function () {
            let mDepartment = $("#dept_options option:selected").val();
            // 根据 院系的 值 发送Ajax请求 获取 专业
            $.ajax({
                url: "/major_query?mDepartment=" + mDepartment,
                type: "GET",
                success: function (result) {
                    let majors = result.extend.majors;
                    $("#class_options").empty();
                    $("#major_options").empty();
                    $("<option></option>").append("选择专业").attr("value", "-1").appendTo($("#major_options"));
                    $.each(majors, function (index, item) {
                        $("<option></option>").append(item.mname).attr("value", item.mid).appendTo($("#major_options"));
                    });
                }
            });
        });
        $("#dept_options_update").change(function () {
            let mDepartment = $("#dept_options_update option:selected").val();
            // 根据 院系的 值 发送Ajax请求 获取 专业
            $.ajax({
                url: "/major_query?mDepartment=" + mDepartment,
                type: "GET",
                success: function (result) {
                    let majors = result.extend.majors;
                    $("#class_options_update").empty();
                    $("#major_options_update").empty();
                    $("<option></option>").append("选择专业").attr("value", "-1").appendTo($("#major_options_update"));
                    $.each(majors, function (index, item) {
                        $("<option></option>").append(item.mname).attr("value", item.mid).appendTo($("#major_options_update"));
                    });
                }
            });
        });

        // 监听 专业 下拉菜单
        $("#major_options").change(function () {
            let cMajor = $("#major_options option:selected").val();
            // 根据 院系的 值 发送Ajax请求 获取 班级信息
            $.ajax({
                url: "/class_query?cMajor=" + cMajor,
                type: "GET",
                success: function (result) {
                    let classes = result.extend.classes;
                    $("#class_options").empty();
                    $("<option></option>").append("选择班级").attr("value", "-1").appendTo($("#class_options"));
                    $.each(classes, function (index, item) {
                        $("<option></option>").append(item.cname).attr("value", item.cid).appendTo($("#class_options"));
                    });
                }
            });
        });
        $("#major_options_update").change(function () {
            let cMajor = $("#major_options_update option:selected").val();
            // 根据 院系的 值 发送Ajax请求 获取 班级信息
            $.ajax({
                url: "/class_query?cMajor=" + cMajor,
                type: "GET",
                success: function (result) {
                    let classes = result.extend.classes;
                    $("#class_options_update").empty();
                    $("<option></option>").append("选择班级").attr("value", "").appendTo($("#class_options_update"));
                    $.each(classes, function (index, item) {
                        $("<option></option>").append(item.cname).attr("value", item.cid).appendTo($("#class_options_update"));
                    });
                }
            });
        });

        $("#stu_add_btn").click(function () {
            // 发送Ajax请求 获取到 院系信息
            $("#span").text("");
            options($("#dept_options"));
        });

        // 点击添加确定 按钮 添加 数据
        $("#stu_add_enter").click(function () {
            let form = document.getElementById("stu_add_form");
            let inputs = form.getElementsByTagName("input");
            let flag = true;
            $.each(inputs, function (index, item) {
                if (item.value === "") {
                    alert("请确保所有数据填写完整");
                    flag = false;
                    return false;
                }
            });
            if (flag === false) {
                return false;
            }
            let data = $("#stu_add_form").serialize();
            // 发送Ajax请求 添加数据
            $("#stu_add_modal").modal("hide");
            $.ajax({
                url: "/student",
                data: data,
                type: "POST",
                success: function (result) {
                    alert("添加成功");
                    to_page(Pages);
                }
            });
        });

        // 清除表单数据
        function rest_form(ele) {
            $(ele)[0].reset();
        }

        // 单个删除功能
        $(document).on("click", ".del_btn", function () {
            let sNames = $(this).parents("tr").find("td:eq(2)").text();
            if (confirm("你确定要删除【" + sNames + "】吗?")) {
                let sId = $(this).attr("del_btn");
                // 发送 ajax 请求删除 数据
                $.ajax({
                    url: "/student/" + sId,
                    type: "DELETE",
                    success: function (result) {
                        alert("删除成功");
                        to_page(currentPage);
                    }
                });
            }

        });

        // 取消添加
        $("#stu_add_enter").click(function () {
            rest_form($("#class_form"));
        });

        // 全选按钮
        $("#check_all").click(function () {
            let checked = $(this).prop("checked");
            $(".check_item").prop("checked", checked);
        });
        //
        // 实现批量删除
        $("#stu_delete_all").click(function () {
            let sNames = "";
            let sIds = "";

            $.each($(".check_item:checked"), function () {
                sNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                sIds += $(this).parents("tr").find("td:eq(1)").text() + "-";
            });
            sNames = sNames.substring(0, sNames.length - 1);
            sIds = sIds.substring(0, sIds.length - 1);
            if (confirm("你确定要删除【" + sNames + "】吗?")) {
                // 发送 Ajax请求 是想批量删除
                $.ajax({
                    url: "/student/" + sIds,
                    type: "DELETE",
                    success: function (result) {
                        alert("删除成功");
                        to_page(currentPage);
                    }
                });
            }


        });

        // 点击修改按钮
        $(document).on("click", ".update_btn", function () {
            let sId = $(this).parents("tr").find("td:eq(1)").text();
            let sDepartment = $(this).parents("tr").find("td:eq(5)").attr("sDepartment");
            let sMajor = $(this).parents("tr").find("td:eq(6)").attr("sMajor");
            let sClass = $(this).parents("tr").find("td:eq(7)").attr("sClass");

            $.ajax({
                url: "/student_queryById?sId=" + sId,
                type: "GET",
                success: function (result) {
                    let student = result.extend.student;
                    $("#sName_from_update").val(student.sname);
                    $("#sAddress_from_update").val(student.saddress);
                    $("#sIdNumber_from_update").val(student.sidNumber);
                    $("#sPhone_from_update").val(student.sphone);
                    $("#sStatus_from_update").val(student.sstatus);
                    $("#sId_from_update").val(student.sid);
                    if (student.ssex === 1) {
                        $("#gender2_update_input").prop("checked", "checked");
                    } else {
                        $("#gender1_update_input").prop("checked", "checked");
                    }
                }
            });

            // 发送Ajax请求 获取到 院系信息
            $.ajax({
                url: "/department_all",
                type: "GET",
                success: function (result) {
                    let depts = result.extend.departments;
                    $.each(depts, function (index, item) {
                        if (sDepartment !== item.sdepartment) {
                            $("<option></option>").append(item.dname).attr("value", item.did).appendTo($("#dept_options_update"));
                        } else {
                            $("<option></option>").append(item.dname).attr("value", item.did).prop("selected", "selected")
                                .appendTo($("#dept_options_update"));
                        }
                    });
                }
            });

            // 获取专业信息
            $.ajax({
                url: "/major_query?mDepartment=" + sDepartment,
                type: "GET",
                success: function (result) {
                    let majors = result.extend.majors;
                    $("#class_options_update").empty();
                    $("#major_options_update").empty();
                    $("<option></option>").append("选择专业").attr("value", "-1").appendTo($("#major_options_update"));
                    $.each(majors, function (index, item) {
                        if (item.mid == sMajor) {
                            $("<option></option>").append(item.mname).attr("value", item.mid).prop("selected", "selected")
                                .appendTo($("#major_options_update"));
                        } else {
                            $("<option></option>").append(item.mname).attr("value", item.mid).appendTo($("#major_options_update"));
                        }
                    });
                }
            });

            // 获取班级 信息
            $.ajax({
                url: "/class_query?cMajor=" + sMajor,
                type: "GET",
                success: function (result) {
                    let classes = result.extend.classes;
                    $("#class_options_update").empty();
                    $("<option></option>").append("选择班级").attr("value", "").appendTo($("#class_options_update"));
                    $.each(classes, function (index, item) {
                        if (sClass == item.cid) {
                            $("<option></option>").append(item.cname).attr("value", item.cid).prop("selected","selected")
                                .appendTo($("#class_options_update"));
                        } else {
                            $("<option></option>").append(item.cname).attr("value", item.cid).appendTo($("#class_options_update"));
                        }
                    });
                }
            });

        });

        //点击确定 修改按钮
        $("#stu_update_enter").click(function () {
            // 发送Ajax 请求 更新数据
            let data = $("#stu_update_form").serialize() + "&_method=PUT";
            $("#stu_update_modal").modal("hide");
            let sId = $("#sId_from_update").val();
            $.ajax({
                url: "/student/" + sId,
                data: data,
                type: "PUT",
                success: function (result) {
                    alert("修改成功");
                    to_page(currentPage);
                }
            });
        });

        // 点击详情按钮
        $(document).on("click", ".info_btn", function () {
            let sId = $(this).attr("info_btn");
            $.ajax({
                url: "/student_queryById?sId=" + sId,
                type: "GET",
                success: function (result) {
                    let student = result.extend.student;
                    let sex = student.ssex;
                    if (sex === 0) {
                        $("#gender1_info_input").prop("checked", "checked");
                    } else {
                        $("#gender2_info_input").prop("checked", "checked");
                    }
                    $("#sId_from_info").val(student.sid);
                    $("#sName_from_info").val(student.sname);
                    $("#sIdNumber_from_info").val(student.sidNumber);
                    $("#sAddress_from_info").val(student.saddress);
                    $("#sPhone_from_info").val(student.sphone);
                    $("#department_from_info").val(student.dname);
                    $("#major_from_info").val(student.mname);
                    $("#class_from_info").val(student.cname);
                    $("#sStatus_from_info").val(student.sstatus);
                }
            });
        });

        // 关闭详细信息
        $("#stu_info_enter").click(function () {
            $("#stu_info_modal").modal("hide");
        });
        // 实现单击 文本框 选中内容功能
        focus($("#sName_from_update"));
        focus($("#sIdNumber_from_update"));
        focus($("#sAddress_from_update"));
        focus($("#sPhone_from_update"));
        focus($("#sStatus_from_update"));

        focus($("#sName_from_add"));
        focus($("#sIdNumber_from_add"));
        focus($("#sAddress_from_add"));
        focus($("#sPhone_from_add"));
        focus($("#sStatus_from_add"));

        //
        function focus(ele) {
            ele.focusin(function () {
                $(this).select();
            });
        }

        // 全选 按钮 和 单个 按钮的关系
        $(document).on("click", ".check_item", function () {
            let len = $(".check_item:checked").length;
            let flag = len === $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });

        // 点击查找按钮
        $("#search_btn").click(function () {
            let val = $("#search_val").val().trim();
            if (val === "") {
                alert("请输入要查找的内容")
            } else {
                // 发送Ajax请求查找
                $.ajax({
                    url: "/search?search=" + val,
                    type: "GET",
                    success: function (result) {
                        $("#search_val").val("");
                        build_table(result);
                        build_page_info(result);
                        build_page_nav(result);
                    }
                });
            }
        });


    });
</script>
</body>
</html>
